<script>

import { text } from '@/api/system/api'
import item from '@/layout/components/Sidebar/Item.vue'

export default {
  name: 'index',
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      text: '',
      // content: ''
    }
  },
  methods: {
    // getId(data) {


    //   this.tableData.forEach((item) => {
    //     item.content
    //   })
    // },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    handleClick(row) {

      this.dialogVisible=true
      this.text=row.content
    }
  },
  created() {
    text().then(res => {

      res.rows.forEach((item, index) => {
        let obj = {
          id: item.id,
          index: index + 1,
          updateTime: item.updateTime,
          title: item.title,
          content: item.content
        }
        this.text = item.content
        this.tableData.push(obj)
      })
    })

  }
}
</script>

<template>
  <div>

    <div class="outside">
      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="index"
            label="序号"
            width="208" align="center"
          >
          </el-table-column>
          <el-table-column
            prop="title"
            label="名称"
            width="786"
          >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间"
            width="345" align="center"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            width="256" align="center"
            type="index"
          >
            <template slot-scope="scope">
            <div>
              <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
              <el-dialog
                title=""
                :visible.sync="dialogVisible"
                width="30%"
                append-to-body
                :before-close="handleClose"
              >
                <div v-html="text"></div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
              </el-dialog>
            </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.outside {
  margin: 40px 30px 40px 30px
}

.bianji {
  color: rgba(24, 146, 255, 1);
  font-size: 14px;
  text-align: center;
}
</style>
